<template>
  <div >
    <!--导航栏-->
    <van-nav-bar
        title="编辑地址"
        left-text="返回"
        left-arrow
        :fixed=true
        :border=true
        @click-left="onClickLeft"
    />
    <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        @save="onSave"
        @delete="onDelete"
        style="margin-top: 3rem"
        :address-info="{
        name: info.name,
        tel: info.tel,
        addressDetail: info.addressDetail,
        areaCode: info.areaCode,
        postalCode: info.postalCode,
        isDefault: info.isDefault,
      }"
    />
  </div>
</template>

<script>

import {Toast} from 'vant'
import { areaList } from '@vant/area-data';
import { deleteUserAddress, editUserAddress} from "@/api/api";

export default {
  name: "EditAddress",
  created() {
    this.info = {
         name: this.$route.query.name,
          tel: this.$route.query.tel,
          addressDetail: this.$route.query.detailedAddress,
          areaCode: this.$route.query.areaCode,
          postalCode: this.$route.query.zipCode,
          isDefault: this.$route.query.isDefault
    }
  },
  data() {
    return {
      areaList,
      info: {},
      id:this.$route.query.id
    }
  },
  methods: {
    onClickLeft() { // 点击左边
      this.$router.back();  // 返回上一个路由
    },
    // 修改收货地址
    onSave(content) {
      const obj = {
        name:content.name,
        phone:content.tel,
        region:content.country+content.province+content.city+content.county,
        detailedAddress:content.addressDetail,
        zipCode:content.postalCode,
        isDefault:content.isDefault ? "1" : "0",//数据库该项设置为0，1，如不需修改可删除该行
        areaCode:content.areaCode
      };
      editUserAddress(this.id,obj).then(
          (resp)=>{
            Toast("修改成功")
          }
      )
    },
    // 删除收货地址
    onDelete() {
      deleteUserAddress(this.id).then(() => {
            Toast("删除成功");
            this.$router.back();
          }
      )
    }
  }
}
</script>

<style scoped>

</style>

